<template>
  <div class="unusual-detail-dialog-page">
    <el-dialog
      :model-value="props.dialogVisible"
      title="告警详情"
      width="1000px"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <el-row :gutter="16">
        <el-col class="info-item" :span="6" v-for="(item, index) in infoData" :key="index">
          <span class="label">{{item.label}}:</span>
          <span class="value">11</span>
        </el-col>
      </el-row>
      <div class="chart-block mt16">
        <div class="title">
          <span>告警数据</span>
          <span class="heartbeat">心率：次/分钟</span>
        </div>
        <div id="warnCharts" class="warn-charts"></div>
      </div>
      <div class="table-block mt16">
        <div class="title">
          <span>通知消息</span>
        </div>
        <el-table :data="tableData" class="nr-table mt16">
          <el-table-column label="用户姓名" prop="name">
            <template #default="scope">
              <span class="sp-col">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注名称" prop="id"></el-table-column>
          <el-table-column label="分组" prop="rtsp"></el-table-column>
          <el-table-column label="绑定手机" prop="phone">
            <template #default="scope">
              <span class="sp-col">{{scope.row.phone}}</span>
            </template>
          </el-table-column>
          <el-table-column label="绑定微信" prop="rtsp"></el-table-column>
          <el-table-column label="发送时间" prop="rtsp"></el-table-column>
          <el-table-column label="查看时间" prop="rtsp"></el-table-column>
          <!-- <el-table-column label="操作" prop="rtsp">
            <template #default="scope">
              <el-link class="table-btn" type="primary" :underline="false" @click="handleView(scope.row)">查看</el-link>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </el-dialog>

    <unusual-info-dialog
      :dialogVisible="infoDialogVis"
      :formData="warnInfoData.data"
      @update:dialogVisible="(value: boolean) => infoDialogVis = value">
    </unusual-info-dialog>
  </div>
</template>

<script setup lang="ts" name="UnusualDetailDialog">
import { ref, reactive, watch, ComponentInternalInstance, getCurrentInstance, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import * as Echarts from 'echarts'
import UnusualInfoDialog from './unusual-info-dialog.vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

const emit = defineEmits(['update:dialogVisible'])
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  formData: {
    type: Object,
    default: {}
  }
})

const infoData = ref<any>([
  { label: '设备名称', prop: '' },
  { label: '设备ID', prop: '' },
  { label: '设备分组', prop: '' },
  { label: '安装地址', prop: '' },
  { label: '安装房间', prop: '' },
  { label: '用户', prop: '' },
  { label: '告警类型', prop: '' },
  { label: '持续时间', prop: '' },
  { label: '开始时间', prop: '' },
  { label: '结束时间', prop: '' }
])
const tableData = ref<any>([
  { id: 1, name: '111', phone: '138' }
])
let wc: echarts.ECharts
const infoDialogVis = ref(false)
const warnInfoData = ref({
  data: {}
})

onMounted(() => {
})

watch(() => props.dialogVisible, async (newVal) => {
  if (newVal) {
    nextTick(() => {
      initEcharts()
    })
  }
})

// 查看
const handleView = (row: any) => {
  infoDialogVis.value = true
  warnInfoData.value.data = Object.assign({}, row)
}

// 初始化图表
const initEcharts = () => {
  let warnCharts = document.getElementById('warnCharts') as HTMLElement
  wc = Echarts.init(warnCharts)
  wc.setOption({
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '5%',
      right: '5%',
      top: '10%',
      bottom: '10%'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['11/1', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', '11/12']
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '222',
        data: [1111, 1222, 910, 950, 1300, 1400, 1420],
        type: 'line',
        showSymbol: false
      }
    ]
  })
}

// 关闭弹窗
const handleClose = () => {
  proxy?.$emit('update:dialogVisible', false)
}
</script>

<style lang="stylus" scoped>
@import '../../style/base.styl'

.unusual-detail-dialog-page
  .info-item
    margin-bottom 16px
    .label
      width 80px
      display inline-block
      text-align right
      color black
      font-weight bold
    .value
      margin-left 4px
  .heartbeat
    color #aaa
    margin-left 16px
  .sp-col
    color var(--el-color-primary)
  .warn-charts
    width 100%
    height 300px
</style>
